<template>

  <!--头: 引入 CommonHead 子组件-->
  <header class="cart-head">
    <CommonHead title="我的购物车"/>
  </header>

  <!--体: 购物车商品列表-->
  <section class="cart-body">

    <!--当前存在购物车商品时展示-->
    <div v-if="carts.length > 0">

      <van-divider dashed>购物车列表</van-divider>

      <!--操作区: 清空购物车按钮-->
      <article class="operation">
        <!--提交按钮: 区块，主要蓝，提交功能-->
        <van-button plain size="mini" type="danger" @click="clear">清空购物车</van-button>
      </article>

      <van-divider dashed></van-divider>

      <!--滑动单元格: 遍历购物车商品数据-->
      <van-swipe-cell v-for="cart in carts">

        <!--卡片: 视频标题，视频价格，原始价格，视频作者-->
        <van-card :title="cart['videoTitle']"
                  :price="cart['price']"
                  :origin-price="cart['price'] / 0.8"
                  :desc="cart['author']">

          <template #thumb>
            <!--视频封面图: 计算MinIO代理地址，尺寸自适-->
            <van-image height="100%" :src="minio(cart['coverImage'])" fit="fit"/>
          </template>

        </van-card>

        <template #right>
          <!--按钮: 移出购物车-->
          <van-button square type="danger" text="删除"
                      @click="batchDelete(cart['videoId'])" class="delete-cart-btn"/>
        </template>

      </van-swipe-cell>
    </div>

    <!--当前不存在购物车商品时展示-->
    <div v-else>
      <van-divider>您还未添加任何商品</van-divider>
    </div>

  </section>

  <!--脚: 提交订单组件和CommFoot组件-->
  <footer class="cart-footer">
    <!--提交订单组件: 价格，按钮文字，填充区域，点击时触发-->
    <van-submit-bar :price="totalFee * 100" button-text="立即支付" placeholder @submit="pay"/>
    <CommonFoot/>
  </footer>

</template>

<script setup>

import CommonHead from "@/components/CommonHead";
import CommonFoot from "@/components/CommonFoot";
import {MINIO_HOST, SUCCESS} from '@/constant';
import {LIST, BATCH_DELETE, CLEAR} from "@/api/cart";
import {BUY} from "@/api/order";
import {onMounted, ref, computed, onBeforeMount, shallowRef} from "vue";
import {useStore} from 'vuex';
import router from "@/router";
import {showFailToast, showSuccessToast} from "vant";

/* ==================== data ==================== */

// data: Vuex实例，直接使用useStore()会报错
const vuex = useStore();

// data: 用户主键
const userId = sessionStorage.getItem('userId');

// data: 购物车列表实例
let carts = ref([]);

// data: 订单总金额
let totalFee = shallowRef(0);

/* ==================== computed ==================== */

// computed: 计算MinIO的代理地址，计算属性接收参数需要闭包
const minio = computed(() => src => MINIO_HOST + "/cover/" + src);

/* ==================== method ==================== */

// method: 获取购物车商品列表
async function list() {

  // 无论是否获取成功，都先清空当前购物车列表和总金额，避免数据堆积
  carts.value = [];
  totalFee.value = 0;

  // 异步调用获取购物车商品列表的接口
  const result = await LIST();
  let resp = result['data'];
  if (resp.code === SUCCESS) {
    let data = resp.data;
    for (let i in data) {
      // 解析JSON数据
      let jsonData = data[i];
      // 将视频单价追加到总金额中
      totalFee.value += jsonData['price'];
      // 将JSON数据，整体追加到carts数组中
      carts.value.push(jsonData);
    }
  }
}

// method: 删除指定的购物车商品接口
async function batchDelete(videoId) {

  // 危险操作保护
  if (!confirm("选中的商品将被移出购物车，确定吗？")) {
    return false;
  }

  // 异步调用删除购物车商品接口
  let result = await BATCH_DELETE({'videoIds': [videoId]});
  let resp = result['data'];
  if (resp.code === SUCCESS) {
    showSuccessToast('删除成功');
    await list();
  } else {
    showFailToast(resp.message + ': ' + resp.data);
  }
}

// method: 清空购物车
async function clear() {

  // 危险操作保护
  if (!confirm("清空购物车中的全部商品，确定吗？")) {
    return false;
  }

  // 异步调用对应的API接口
  let result = await CLEAR();
  let resp = result['data'];
  if (resp.code === SUCCESS) {
    showSuccessToast('购物车清空成功');
    await list();
  } else {
    showFailToast(resp.message + ': ' + resp.data);
  }
}

// method: 立即结算
let pay = async () => {

  if (carts.value.length <= 0) {
    showFailToast("支付失败: 不存在任何购物车记录")
    return;
  }

  // 声明视频ID数组
  let videoIds = [];

  // 赋值视频ID数组
  carts.value.forEach(cart => videoIds.push(cart['videoId']));

  // 准备参数
  let param = {
    'videoIds': videoIds,
    'totalFee': totalFee.value,
    'orderInfo': '暂无描述'
  };

  // 异步调用添加订单接口
  const result = await BUY(param);
  let resp = result['data'];
  if (resp.code === SUCCESS) {
    // 添加订单成功后，异步调用删除购物车记录接口
    let result = await BATCH_DELETE({'videoIds': videoIds});
    let resp = result['data'];
    if (resp.code === SUCCESS) {
      showSuccessToast('支付成功');
      await router.push("/Order");
    } else {
      showFailToast(resp.message + ': ' + resp.data);
    }
  } else {
    showFailToast(resp.message + ': ' + resp.data);
  }
}

/* ==================== beforeMount ==================== */

// beforeMount: DOM挂载前，判断用户是否登录
onBeforeMount(() => {
  if (!vuex.state['loginFlag']) {
    showFailToast('请先登录');
    setTimeout(() => router.push("/LoginByAccount"), 1000);
  } else {
    // 查询购物车列表
    list(userId);
  }
});
</script>

<style scoped lang="scss">

.cart-body {

  /*卡片中的图片*/
  .van-image {
    width: 130px; // 图片宽度
  }

  /**卡片中的文字内容: `:deep()` 用于深度修改框架组件的样式*/
  :deep(.van-card__content) {
    text-align: right; // 内容居右
  }

  /*滑动后出现的删除按钮*/
  .delete-cart-btn {
    height: 100%; // 高度
  }

  /*操作区*/
  .operation {
    text-align: right; // 内容局右
    margin: 15px; // 外边距
  }
}

.cart-footer {

  /** `:deep()` 用于深度修改框架组件的样式*/
  :deep(.van-submit-bar) {
    bottom: 50px; // 下边距50，否则遮挡我们的通用脚组件
  }
}

</style>